let that;
    class Enlarge {
        constructor(ele) {
            this.ele = ele;
            this.small = this.ele.children[0]
            this.big = this.ele.children[1]
            this.mask = this.small.children[1]
            this.bigimg = this.big.children[0]
            that = this;
            this.bindEvents();
        }
        bindEvents() {
            // 1. 鼠标移入
            this.ele.onmouseover = this.over;
            // 2. 鼠标移出
            this.ele.onmouseout = this.out;
            // 3. 鼠标移动
            this.ele.onmousemove = this.move;
        }
        over() {
            that.mask.style.display = 'block'
            that.big.style.display = 'block'
        }
        out() {
            that.mask.style.display = 'none'
            that.big.style.display = 'none'
        }
        move(e) {
            let ev = e || event;
            //   3.1 鼠标位置
            let x = ev.clientX - that.mask.offsetWidth / 2;
            let y = ev.clientY - that.mask.offsetHeight / 2;
            //   3.2 遮罩跟随
            //   3.3 边界限制  x最小值0   x最大值（box.clientWidth-mask.offsetWidth）

            if (x <= 0) {
                x = 0;
            }
            if (x >= that.ele.clientWidth - that.mask.offsetWidth) {
                x = that.ele.clientWidth - that.mask.offsetWidth
            }

            if (y <= 0) {
                y = 0;
            }
            if (y >= that.ele.clientHeight - that.mask.offsetHeight) {
                y = that.ele.clientHeight - that.mask.offsetHeight;
            }
            //bigx
            //图片可以运动的最大距离/遮罩运动的最大距离=图片移动的位置/遮罩的左偏移量
            let bilix = (that.bigimg.offsetWidth - that.big.clientWidth) / (that.small.clientWidth - that.mask.offsetWidth);
            let biliy = (that.bigimg.offsetHeight - that.big.clientHeight) / (that.small.clientHeight - that.mask.offsetHeight);


            let bigx = bilix * that.mask.offsetLeft;
            let bigy = biliy * that.mask.offsetTop;

            that.bigimg.style.left = - bigx + 'px'
            that.bigimg.style.top = - bigy + 'px'

            //   3.4 设置给遮罩的left和top
            that.mask.style.left = x + 'px'
            that.mask.style.top = y + 'px'
        }
    }
    let box = document.querySelector('#box');
    new Enlarge(box);